<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#name").blur(function () {
                var name = this.value;
                if ( name == null || name === "") {
                    $("#nameDiv").html("用户名不能为空");
                }else {
                    $.ajax(
                        {
                            "url" : "ServletValidate",
                            "type" : "GET",
                            "data" : "name="+name ,
                            "dataType" : "text",
                            "success" : callBack ,
                            "error" : function () {
                                alert("后台出错了哦亲，网络开小差了")
                            }
                        }
                    )

                    function callBack( data ) {
                        if (data == "success" ) {
                            $("#nameDiv").html("名字可以使用");
                        }else {
                            $("#nameDiv").html("名字已被占用");
                        }

                    }
                }

            })




        })


    </script>



</head>
<body>
    <form action="">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="name" id="name"></td>
                <td> <div id="nameDiv" style="display: inline"> </div></td>
            </tr>
        </table>
    </form>
</body>
</html>